<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        姓名：<input type="text" class="username"><br>
        qq:<input type="text" class="qq"><br>
        网址：<input type="text" class="web"><br>
        身份证:<input type="text" class="ID"><br>
        手机号：<input type="text" class="phone"><br>
        邮箱：<input type="text" class="email"><br>

       <input type="submit" value="提交"/>
       <hr>
        <span class="info">提示信息</span>
    </form>
    <script>
        // 中文名字 ：2-4位；
        // qq号  :开头1-9 中间0-9 总 5-11位
        // 网址 ：www.baidu.com.cn
        // 身份证号: 18位  最后一位可以是X
        // 邮箱 ：@ 
        // 手机号：1开头 中间3456789  总11位
        
        // 需要失去焦点的时候校验是否符合规则；
        // 1.中文要2-4位；[\u4e00-\u9fa5]  匹配中文字符
        
        // var usernameEle = document.querySelector(".username");
        // var infoEle = document.querySelector(".info");
        // usernameEle.onblur = function(){
        //     var reg = /^[\u4e00-\u9fa5]{2,4}$/g;
        //     var val = this.value;
        //     if(reg.test(val)){
        //         infoEle.innerHTML = "姓名符合规则";
        //         infoEle.style.color = "green";
        //     }else{
        //         infoEle.innerHTML = "姓名不符合规则";
        //         infoEle.style.color = "red";
        //     }
        // }

        // 2.qq号 :开头1-9 中间0-9 总 5-11位

        // var reg = /^[1-9]\d{4,10}$/g;
        // var qqEle = document.querySelector(".qq");
        // var infoEle = document.querySelector(".info");
        // qqEle.onblur = function(){
        //     var val = this.value;
        //     if(reg.test(val)){
        //         infoEle.innerHTML = "qq符合规则";
        //         infoEle.style.color = "green";
        //     }else{
        //         infoEle.innerHTML = "qq不符合规则";
        //         infoEle.style.color = "red";
        //     }
        // }
        // 3，网址 http://www.baidu.com

        // var reg = /^(http)|(https):\/\/www\.\w{2,}\.([a-zA-Z]{3})+\.([a-zA-Z]{2})?$/g;
        // var reg = /^(http)|(https):\/\/www\.\w{2,}(.\w{3}$)|(.\w{3}\.w{2}$)/g;

        // 配置网址 ：http 或者是https开头 www.数字字符下划线.字符是2个或者三个（com，cn）最少一个 最多2次
        // https://www.baidu.com.cn  .com可以是2位或者是3位 .com 可以出现1次或者2次 ；
        // var reg = /^https?:\/\/www\.\w{2,}(\.\w{2,3}){1,2}$/;
        
        // https://www.数字字符下划线(.com) 或者(.com.nn)
        // var reg = /^https?:\/\/www\.\w{2,}(\.\w{3})$|(\.\w{3}\.\w{2})$/;
        // var webEle = document.querySelector(".web");
        // var infoEle = document.querySelector(".info");
        // webEle.onblur = function(){
        //     var val = this.value;
        //     console.log(val);
        //     if(reg.test(val)){
        //         infoEle.innerHTML = "网址符合规则";
        //         infoEle.style.color = "green";
        //     }else{
        //         infoEle.innerHTML = "网址不符合规则";
        //         infoEle.style.color = "red";
        //     }
        // }



        // 身份证 ：18位  最后一位可以是X
        // var idEle = document.querySelector(".ID");
        // var infoEle = document.querySelector(".info");
        // idEle.onblur = function(){
        //     var val = this.value;
        //     var reg = /^[1-9]\d{16}\d$|X$/g;
        //     console.log(val);
        //     if(reg.test(val)){
        //         infoEle.innerHTML = "身份证符合规则";
        //         infoEle.style.color = "green";
        //     }else{
        //         infoEle.innerHTML = "身份证不符合规则";
        //         infoEle.style.color = "red";
        //     }
        // }


        //手机号：1开头 中间3456789  总11位
        // var phoneEle = document.querySelector(".phone");
        // var infoEle = document.querySelector(".info");
        // phoneEle.onblur = function(){
        //     var val = this.value;
        //     var reg = /^1[3-9]\d{9}$/g;
        //     console.log(val);
        //     if(reg.test(val)){
        //         infoEle.innerHTML = "手机号符合规则";
        //         infoEle.style.color = "green";
        //     }else{
        //         infoEle.innerHTML = "手机号不符合规则";
        //         infoEle.style.color = "red";
        //     }
        // }

        // 邮箱验证

        var emailEle = document.querySelector(".email");
        var infoEle = document.querySelector(".info");
        emailEle.onblur = function(){
            var val = this.value;
            // 234234@qq.com
            var reg = /^\w+@\w+((\.\w{3})|(\.\w{3}\.\w{2}))$/g;
            console.log(val);
            if(reg.test(val)){
                infoEle.innerHTML = "邮箱符合规则";
                infoEle.style.color = "green";
            }else{
                infoEle.innerHTML = "邮箱不符合规则";
                infoEle.style.color = "red";
            }
        }

    </script>
</body>
</html>